<template>
  <div style="margin: 0 20px">
    <div class="search">
      <div class="left">
        <div style="display: flex">
          <span style="padding-right: 5px">消防机构: </span>
          <span :title="loginInfoStore.loginInfo.jgmc">{{ loginInfoStore.loginInfo.jgmc }}</span>
        </div>
        <div style="margin-left: 30px">
          <span>机构性质: </span>
          <el-select v-model="jgxz" placeholder="请选择" @change="jgxzChange">
            <el-option
              v-for="item in jgOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="tips">
        <i></i>
        <span>请填报本单位编制人员</span>
      </div>
      <div class="right">
        <span class="add" @click="mechanismStore.JgPersonnelInfoAddShow = true">新&nbsp;增</span>
        <el-input v-model="search" placeholder="请输入姓名搜索" style="width: 200px; float: right">
          <template #suffix>
            <el-icon class="el-input__icon"><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      height="640"
      :header-cell-style="headerCellStyle"
      stripe
    >
      <el-table-column prop="xm" label="姓名" />
      <el-table-column prop="xzzwdm" label="职务">
        <template #default="scope">
          {{ formatXzzwdm(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="xfgwflydm" label="岗位">
        <template #default="scope">
          {{ formatXfgwflydm(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="ydLxdh" label="手机长号" />
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <span class="delete" @click="deleteJgPersonnelInfo(scope.row)">删除</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="currentPage"
      background
      layout="total, sizes, prev, pager, next"
      :total="total"
      :page-sizes="[10, 15, 30, 50, 100]"
      style="position: absolute; bottom: 20px; right: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 人员添加 -->
  <JgPersonnelInfoAdd />

  <!-- 填报提示弹窗 -->
  <Tips />
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useMechanismStore, useLoginInfoStore } from '@/store'
import { Search } from '@element-plus/icons-vue'
import JgPersonnelInfoAdd from './components/JgPersonnelInfoAdd.vue'
import Tips from './components/Tips.vue'
import { queryJyry, queryZd, queryZwxx, deleteJyry, addJyjgxz } from '@/service'

const loginInfoStore = useLoginInfoStore()
const mechanismStore = useMechanismStore()

// 搜索框
const search = ref('')
/** 监听搜索框获取过滤后表格数据 */
watch(
  () => search.value,
  (newVal, oldVal) => {
    pageInfo.value.ssc = newVal
    getPersonnelInfo()
  }
)

// 表头样式
const headerCellStyle = { color: '#fff', backgroundColor: '#209dbe' }
// 表格数据
const tableData = ref()
const total = ref()
const currentPage = ref(1)
const pageInfo = ref({ pageNo: 1, pageSize: 10, ssc: '' })
/** 获取人员信息 */
const getPersonnelInfo = () => {
  queryJyry({ jyjgId: loginInfoStore.loginInfo.jgId, ...pageInfo.value }).then((res: any) => {
    tableData.value = res.records
    total.value = res.total
  })
}
getPersonnelInfo()
/** 监听机构人员信息表格是否需要刷新 */
watch(
  () => mechanismStore.PersonnelTableRefresh,
  (newVal, oldVal) => {
    if (newVal) {
      getPersonnelInfo()
      mechanismStore.PersonnelTableRefresh = false
    }
  },
  {
    immediate: true, // 立即执行
    deep: true, // 深度监听
  }
)

/** 分页操作 */
//切换页码
const handleCurrentChange = (val: any) => {
  pageInfo.value.pageNo = val
  getPersonnelInfo()
}
//选择条数
const handleSizeChange = (val: any) => {
  pageInfo.value.pageSize = val
  getPersonnelInfo()
}

/** 删除人员信息 */
const deleteJgPersonnelInfo = (row: any) => {
  ElMessageBox.confirm('确定要删除吗?', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    cancelButtonClass: 'cancel',
    type: 'warning',
  })
    .then(() => {
      deleteJyry({ id: row.id })
        .then(() => {
          ElMessage.success('删除成功')
          getPersonnelInfo()
        })
        .catch(() => {
          ElMessage.success('删除失败')
        })
    })
    .catch(() => {
      // catch error
    })
}

// 机构性质
const jgxz = ref(loginInfoStore.loginInfo.xfjgJyjgXz)
/** 获取机构性质 */
const jgOptions = ref()
queryZd({ zdx: 'JGXZ' }).then((res: any) => {
  jgOptions.value = res.map((item: any) => {
    return { label: item.mc, value: item.dm }
  })
})
// 机构性质切换 需要重新查询职务
const jgxzChange = (val: any) => {
  //获取机构性质名称
  let jgxzmc = ''
  jgOptions.value.map((item: any) => {
    if (val === item.value) {
      jgxzmc = item.label
    }
  })
  addJyjgxz({
    cjrId: loginInfoStore.loginInfo.jgId,
    jgid: loginInfoStore.loginInfo.jgId,
    jgxzdm: val,
    jgxzmc,
  }).then(() => {
    ElMessage.success('更新成功')
    loginInfoStore.loginInfo.xfjgJyjgXz = val
    sessionStorage.setItem('loginInfo', JSON.stringify({ ...loginInfoStore.loginInfo }))
    getZWXX()
    getPersonnelInfo()
  })
}

/** 获取职务信息 */
const getZWXX = () => {
  queryZwxx({ xz: jgxz.value, zdx: 'XZZW' }).then((res) => {
    mechanismStore.zwOptions = res as any
  })
}
getZWXX()
// 格式化职务信息
const formatXzzwdm = computed((res) => {
  return (res: any) => {
    let str = ''
    mechanismStore.zwOptions.forEach((item: any) => {
      if (item.dm === res.xzzwdm) {
        str = item.mc
      }
    })
    return str
  }
})

/** 获取岗位 */
queryZd({ zdx: 'GW' }).then((res) => {
  mechanismStore.gwOptions = res as any
})
// 格式化岗位
const formatXfgwflydm = computed((res) => {
  return (res: any) => {
    let str = ''
    mechanismStore.gwOptions.forEach((item: any) => {
      if (item.dm === res.xfgwflydm) {
        str = item.mc
      }
    })
    return str
  }
})
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  .left {
    display: flex;
    align-items: center;
    flex: 1;
    span:nth-child(2) {
      max-width: 340px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      color: #606266;
    }
  }
  .right {
    width: 315px;
    line-height: 32px;
    .add {
      display: inline-block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      background-color: #209dbe;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}

.delete {
  color: red;
  cursor: pointer;
}

.tips {
  position: absolute;
  right: 45%;
  margin-right: -20%;
  font-size: 16px;
  font-weight: 700;
  i {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 3px;
    background-image: url('@/assets/image/tips-icon.png');
    background-size: 100% 100%;
    vertical-align: bottom;
  }
}
</style>
